﻿@model List<FTBS.Models.Entities.Concert.TheaterConcertEntity>
@{
    var lati = string.Empty;

    lati = (string)ViewBag.Latitude;

    var longti = string.Empty;

    longti = (string)ViewBag.Longitude;

}
<style>
    .filmkind {
        padding: 5px;
        font-size: 27px;
        background-color: rgb(83, 141, 160);
        color: white;
    }
</style>
<body>

    @if (Model.Count >= 3)
    {
        <div class="panel" style="display: table-cell; display: inline-block; background-color: white; margin-top: 20px; margin-left: 15px; width: 97.5%">
            <div class="container">
                <div>
                    <div class="filmkind">
                        <span>Rạp gần bạn</span>
                        <span style="float: right; height: 45px"><a href="/Home/Theaters">
                            <img class="arrow3" src="~/Image/Icon/dou-ar.png" style="height: 45px; padding-bottom: 10px" /></a></span>
                    </div>
                </div>
                <hr style="margin-top: 3px; background-color: #ddd; height: 2px;" />
                <div>
                    <div style="display: block; margin: 0 auto">
                        @foreach (var item in Model)
                        {
                            <div style="display: inline-block; width: 32%">
                                <div style="margin-left: 5px; border: solid; border-width: 1px">
                                    <a href="/Schedule/ScheduleTheater">
                                        <img src="~/Image/Theater/@Html.DisplayFor(ImageURL => item.ImageURL)" style="height: 260px; width: 100%" />
                                    </a>
                                </div>
                                <div style="margin-left: 12px">
                                    <table>
                                        <tr>
                                            <td>
                                                <img src="~/Image/Icon/HouseBlack.png" style="width: 40px; height: 40px" />
                                            </td>
                                            <td>
                                                <strong style="font-size: 20px" class="limitName">@item.TheaterName</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <img src="~/Image/Icon/Location_Icon.png" style="width: 40px; height: 40px" />
                                            </td>
                                            <td>
                                                <strong class="limitName">@Html.DisplayFor(address => item.Address)</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <img src="~/Image/Icon/Distance_Icon.jpg" style="width: 40px; height: 40px" />
                                            </td>
                                            <td>
                                                <strong>@item.DistanceString</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <img src="~/Image/Icon/Moto_Icon.png" style="width: 50px; height: 50px" />
                                            </td>
                                            <td>
                                                <strong>@item.Time</strong>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="margin-left: 12px">
                                    <div style="display: inline-block; margin: 3px">
                                        <button class="warning" onclick="ChangeView()">Xem suất chiếu</button>
                                    </div>
                                </div>
                                @if (Model.IndexOf(item) == 0)
                                {
                                    <div id="theater1" style="overflow-y: auto; opacity: 0">
                                        @item.TheaterId
                                    </div>
                                    <div id="timeAndDics1" style="overflow-y: auto; opacity: 0">
                                        @item.Time + @item.DistanceString
                                    </div>
                                }
                                @if (Model.IndexOf(item) == 1)
                                {
                                    <div id="theater2" style="overflow-y: auto; opacity: 0">
                                        @item.TheaterId
                                    </div>
                                    <div id="timeAndDics2" style="overflow-y: auto; opacity: 0">
                                        @item.Time + @item.DistanceString
                                    </div>
                                }
                                @if (Model.IndexOf(item) == 2)
                                {
                                    <div id="theater3" style="overflow-y: auto; opacity: 0">
                                        @item.TheaterId
                                    </div>
                                    <div id="timeAndDics3" style="overflow-y: auto; opacity: 0">
                                        @item.Time + @item.DistanceString
                                    </div>
                                }
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
        
        <div id="lati" style="overflow-y: auto; opacity: 0">
            @lati
        </div>
        <div id="longi" style="overflow-y: auto; opacity: 0">
            @longti
        </div>
    }
</body>
<script>
    $(document).ready(saveUserPosition());
    function saveUserPosition() {
        var lat = document.getElementById('lati').innerText;
        var long = document.getElementById('longi').innerText;
        var theaterId1 = document.getElementById('theater1').innerText;
        var timeAndDics1 = document.getElementById('timeAndDics1').innerText;
        var theaterId2 = document.getElementById('theater2').innerText;
        var timeAndDics2 = document.getElementById('timeAndDics2').innerText;
        var theaterId3 = document.getElementById('theater3').innerText;
        var timeAndDics3 = document.getElementById('timeAndDics3').innerText;
        setPositionOfUser(lat, long, theaterId1, theaterId2, theaterId3, timeAndDics1, timeAndDics2, timeAndDics3);
    }
    function ChangeView() {
        window.location.href = "/Schedule/ScheduleTheater";
    }

    $(document).ready(function () {
        $(".arrow3").mouseenter(function () {
            $(".arrow3").attr("src", "/Image/Icon/dou-ar-red.png")

        });
        $(".arrow3").mouseleave(function () {
            $(".arrow3").attr("src", "/Image/Icon/dou-ar.png")
        });
    });
</script>
